<template>
    <div>
        <div class="inputWrapper">
            <!-- 引入表单动态的设置
            type：这个文本值的属性 
             v-modele 做双向数据传递
              并且做鼠标离开的事件
              动态的赋值类名
              在动态赋予值的时候，运用
              类型：布尔值
              -->
            <input :type="type" 
            :placeholder='placeholder' 
            v-model="inputval" 
            @blur="checkvalue"
            :class="{
                success:istrue,
                error:!istrue
            }">
        </div>
    </div>
</template>

<script>
export default {
    data(){
  return{
    //   引入值，istrue和inputval的值
      istrue:true,
      inputval:'',
  }
    },
    // props是单项数据绑定，运用父组件来改变子组件的值，这里相当于要从父组件传的元素
    props:['type','placeholder','rule',"msg"],
    watch:{
        //这里需要做一个文本框输入的值来做一个验证，这里验证需要引进正则表达式的方法
        // 并且在input值中
         inputval(newval){ //文本框传入的值
            if(this.rule.test(newval)){ //假如文本框传入的值符合正则表达式的方法
                this.istrue=true; //那么让动态值的布尔值为真 ，为了可以改变
                console.log('合法');
            }else{
                this.istrue=false //假如不符合标准的话 让动态值的布尔值为假
                console.log(this.msg); //并且log出这个错误提示
            }
            this.$emit('valchange',newval) //并且将这个值传入到父组件中，这里采用的是$emit的方法
        }
    },
    //这里需要做一个鼠标离开按钮的判断，假如获取到的istrue的值为错误，则显示这里的错误提示
    methods:{
        checkvalue(){
            if(!this.istrue){
                // alert(this.msg)
                this.$toast(this.msg);
            }
        }
    }
}
</script>

<style lang="less" scoped>
.inputWrapper {
    padding-bottom: 16/360*100vw;
    input {
        width: 100%;
        height: 48/360*100vw;
        line-height: 48/360*100vw;
        font-size: 18/360*100vw;
        border: none;
        outline: none;
        border-bottom: 1px solid #333;
    }
    .success{
          border-color: green;
    }
    .error {
        border-color: red;

    }

}

</style>